<template>
  <div>
    <div class="expire">报价有效期<span v-if="showExpire">过期</span></div>
    <div v-if="priceTime" class="medium-data-item">
      <span class="title">起始:</span>
      <span v-if="priceTime.startTime" class="name keep-all">{{ priceTime.startTime | parseUTCTime('{y}/{m}/{d}') }}</span>
      <span v-else class="name keep-all">--</span>
    </div>
    <div v-if="priceTime" class="medium-data-item">
      <span class="title">结束:</span>
      <span v-if="priceTime.endTime" class="name keep-all">{{ priceTime.endTime | parseUTCTime('{y}/{m}/{d}') }}</span>
      <span v-else class="name keep-all">--</span>
    </div>
  </div>
</template>

<script>
import { parseUTCTime } from '@/filters/date';
import { TableData } from '@/views/medium/mixin/mediumData';
export default {
  filters: { parseUTCTime },
  props: {
    activeTabs: {
      type: String,
      default: ''
    },
    priceTime: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      TableData
    };
  },
  computed: {
    showExpire() {
      // 是否展示过期图标
      return this.priceTime.endTime && (new Date(this.priceTime.endTime).getTime() < new Date().getTime());
    }
  }
};
</script>
<style lang="scss" scoped>
.expire {
  font-size: 12px;
  span {
    display: inline-block;
    margin-left: 10px;
    border: 1px solid #FF4E5F;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    line-height: 12px;
    color: #FF4E5F;
  }
}
</style>
